import VueRouter from 'vue-router'
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'

//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
//获取原型对象上的push函数
const originalReplace = VueRouter.prototype.replace
//修改原型对象中的push方法
VueRouter.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => err)
}

// 创建路由器
const router = new VueRouter({
    mode: 'history', // 默认是hash模式, 即路径中有个#号, 但是#号及后面的内容不会带到服务器中去. 但是默认会导致刷新404, 即页面路径当做完整的路径地址. history模式可以解决这个问题, 
                    //但是需要后端配合, 即后端需要配置一个统一的入口, 用来返回index.html页面, 然后前端路由器会根据路径匹配到相应的组件.
    routes: [
        {
            name: 'home',
            path: '/home',
            component: Home,
            meta: {
                title: '首页',
                isAuth: true
            },
            children: [
                {
                    name: 'news',
                    path: 'news',
                    component: () => import('../pages/News.vue'),
                    beforeEnter: (to, from, next) => {
                        console.log('beforeEnter')
                        next()
                    }
                },
                {
                    name: 'message',
                    path: 'message',
                    component: () => import('../pages/Message.vue'),
                    children: [
                        {
                            name: 'xiangqing',// 命名路由, 可以简化跳转路径
                            path: 'detail/:id/:title/:content',
                            // path: 'detail/:id/:title',
                            component: () => import('../pages/Detail.vue'),
                            // meta: {
                            //     isAuth: true,
                            //     title: '消息详情'
                            // },
                            // beforeEnter: (to, from, next) => {
                            //     console.log('beforeEnter')
                            //     next()
                            // }
                            // props第一种写法,
                            // props: (route) => ({id: route.params.id, title: route.params.title, content: route.params.content})
                            // props第二种写法, 所有params参数都会以props的形式传递给Detail组件, 只支持params参数, 不支持query参数
                            props: true

                        }
                    ]
                }
            ]
        },
        {
            name: 'about',
            path: '/about',
            component: About,
            meta: {
                title: '关于',
                isAuth: true
            } 
        },
        {
            path: '',
            redirect: '/home'
        },
    ]
})
// 全局前置路由守卫, 初始化时被调用, 每次路由切换之前被调用, next必须调用, 否则路由不能切换
router.beforeEach((to, from, next) => {
    console.log('beforeEach')
    // 
    // if(to.meta.isAuth) {// 提前配置哪些模块需要登录.
    //     if(localStorage.getItem('school') === 'atguigu' || to.path === '/about'  || to.path === '/home') {
    //         next()
    //     }
    // }
    next()
    
})
// 全局后置路由守卫, 初始化时被调用, 每次路由切换之后被调用
router.afterEach((to, from) => {
    // to and from are both route objects.
    to.meta.title && (document.title = to.meta.title)
    console.log('afterEach', to , from)
})

export default router